<template>
  <div>
    <el-dialog
      title="选择模板"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="1000px"
      @closed="checked = {}"
    >
      <div class="template-wrap">
        <div>
          模板类型：
          <el-select
            v-model="tempType"
            placeholder="请选择模板类型"
            size="small"
            @change="handleChange"
            clearable
          >
            <el-option label="首页" value="0"></el-option>
            <el-option label="单篇文章" value="1"></el-option>
            <el-option label="列表页" value="2"></el-option>
            <el-option label="图片列表页" value="3"></el-option>
            <el-option label="书籍列表页" value="4"></el-option>
          </el-select>
        </div>
        <div
          :class="['template-item', { active: item.id == checked.id }]"
          v-for="item in filterData"
          :key="item.id"
        >
          <div
            class="img-box"
            title="点击预览"
            @click="handlePreview(item)"
            :style="'background-image: url(' + fileUrl(item) + ');'"
          ></div>
          <div class="txt-box" @click="handleSelect(item)">
            <el-button type="text" class="select-btn" size="mini"
              >选择</el-button
            >
            <p>编号：{{ item.code || '--' }} </p>
            <p>类型：{{ templateType(item.type) }}</p>
            <p>名称：{{ item.name }}</p>
          </div>
        </div>
        <div style="clear: both"></div>
        <Pagination
          v-show="parseInt(pageObj.count) > 0"
          :total="parseInt(pageObj.count)"
          @change="getList"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          v-preventReClick
          :disabled="!checked.hasOwnProperty('id')"
          @click="submitForm"
          >提 交</el-button
        >
      </span>
    </el-dialog>
    <ImgPreview />
  </div>
</template>
<script>
export default {
  components: {
    ImgPreview: () => import('../netDisk/preview/Img.vue'),
  },
  data() {
    return {
      tempType: '',
      dialogVisible: false,
      checked: {},
      listQuery: {
        page: 1,
        limit: 10,
        status: 1,
      },
      tableData: [],
      pageObj: {},
      filterData: [],
    }
  },
  props: ['defaultValue'],
  mounted() {
    this.$bus.$on('selectWebTemplate', (v) => {
      this.checked = v
      this.getList()
    })
  },
  beforeDestroy() {
    this.$bus.$off('selectWebTemplate')
  },
  methods: {
    async getList() {
      let res = await this.$store.dispatch('queryWebTemplate', this.listQuery)
      this.tableData = res.data
      this.filterData = JSON.parse(JSON.stringify(this.tableData))
      this.pageObj = res
      this.dialogVisible = true
    },
    fileUrl(item) {
      return item.hasOwnProperty('picInfo')
        ? item.picInfo.httpUrl
        : require('@/assets/no_pic.png')
    },
    handlePreview(row) {
      let { fileList } = row
      if (fileList && fileList.length) {
        this.$bus.$emit('showDialogimgPreview', fileList[0], fileList)
      } else {
        this.warnMsg('暂未上传模板')
      }
    },
    handleSelect(item) {
      this.checked = item
    },
    templateType(type) {
      switch (type) {
        case '0':
          return '首页'
        case '1':
          return '单篇文章'
        case '2':
          return '列表页'
        case '3':
          return '图片列表页'
        case '4':
          return '书籍列表页'
      }
    },
    submitForm() {
      this.$emit('emit', this.checked)
      this.dialogVisible = false
    },
    handleChange(val) {
      if (val == '') {
        this.filterData = JSON.parse(JSON.stringify(this.tableData))
      } else {
        this.filterData = this.tableData.filter((v) => v.type == val)
      }
      this.pageObj.count = this.filterData.length
    },
  },
}
</script>
<style scoped lang="scss">
.template-wrap {
  width: 100%;
  min-height: 400px;
  .template-item {
    float: left;
    width: 18%;
    margin: 10px 1%;
    border-radius: 3px;
    cursor: pointer;
    box-sizing: border-box;
    border: 2px solid #eee;
    &.active {
      border-color: #67c23a;
    }
    .img-box {
      width: 100%;
      height: 150px;
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      border-bottom: 1px solid #eee;
    }
    .txt-box {
      position: relative;
      padding: 5px 10px;
      font-size: 12px;
      line-height: 1.5;
      .select-btn {
        position: absolute;
        right: 10px;
        top: 0;
      }
    }
  }
}
</style>